import React, { useEffect, useState } from 'react'
import '../../scss/lwl/lwl.css'
import axios from 'axios'
import { Tabs, Radio } from 'react-vant'
import { Search, Toast, Button, Popover, Space, } from 'react-vant';
import { Location } from '@react-vant/icons';
import { InfiniteScroll, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { useNavigate } from 'react-router-dom'
import { Ellipsis } from '@nutui/nutui-react'
export default function Lwl_Home() {
  const jump = useNavigate()
  const [data, setData] = useState([])
  const [page, setPage] = useState(0)
  const [pagesize, setPagesize] = useState(4)
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    const { data: { house } } = await axios.get('http://localhost:3000/house', { params: { page, pagesize, house_type } })
    if (house.length > 0) {
      await sleep(1000)
    }
    setData(val => [...val, ...house])
    setHasMore(house.length > 0)
    setPage(page + pagesize)

  }
  const items = [
    {
      id: 0,
      name: '整租'
    },
    {
      id: 1,
      name: '合租/单间'
    },
    {
      id: 2,
      name: '公寓'
    },
    {
      id: 3,
      name: '短租'
    }
  ]
  //选项卡搜索
  const [value, setValue] = useState('');

  //单选
  const [house_type, setRadio] = useState('');
  useEffect(() => {
    setData([])
    setPage(0)
    setHasMore(true)
  }, [house_type])
  // const newData=[...data].filter(item=>item.house_type.includes(house_type))
  const getType = (e) => {
    setRadio(e)
  }

  const [uid, setUid] = useState('665db2daf793db849f33b899')
  const jumpDetial = async (item) => {
    item.uid = uid
    await axios.post('http://localhost:3000/historyadd', item)
    jump(`/detail?id=${item._id}&lid=${item.lid}`)
  }

  const positions = [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }];
  const types = [{ text: '整租' }, { text: '合租' }, { text: '公寓' }, { text: '短租' }]
  const prices = [{ text: '选项一' }, { text: '选项二' }]
  const more = [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }]
  const sort = [{ text: '价格升序' }, { text: '价格降序' }]
  const select = (option) => Toast.info(option.text);

  //价格排序
  const [sorted, setSorted] = useState(true)
  const sortes = () => {
    setSorted(!sorted)
    if (sorted) {
      const newData = [...data].sort((a, b) => a.price - b.price)
      setData(newData)
    } else {
      const newData = [...data].sort((a, b) => b.price - a.price)
      setData(newData)
    }
  }
  return (
    <div className='body' >
      <p id='title'>
        <span>小默租房</span>
        <span>
          <select style={{ background: 'rgba(0,0,0,0.1)', color: 'white', border: 'none' }}>
            <option value="">请选择地区</option>
            <option value="深圳">深圳</option>
            <option value="广东">广东</option>
            <option value="河南">河南</option>
            <option value="北京">北京</option>
          </select>
        </span>
      </p>
      <div id="main">
        <Tabs defaultActive={0}>
          {items.map((element, index) => (
            <Tabs.TabPane key={element.id} title={element.name} style={{ borderRadius: '20px', width: '95vw', margin: '0 auto' }} >
              <div className='checkCart'>
                <Search
                  showAction
                  actionText={<div onClick={() => Toast.info(value)}>搜索</div>}
                  value={value}
                  onChange={setValue}
                  onClickInput={() => { jump('/sear') }}
                  placeholder="小区/商圈/地铁站/地点"
                />
                <Radio.Group defaultValue="1" direction="horizontal" iconSize={15} style={{ marginTop: '10px', marginLeft: '10px' }} value={house_type} onChange={(e) => { getType(e) }}>
                  <Radio name="">不限</Radio>
                  <Radio name="1室">1室</Radio>
                  <Radio name="2室">2室</Radio>
                  <Radio name="3室及以上">3室及以上</Radio>
                </Radio.Group>
                <div id='cartBtn'>
                  <Button className='cbtn1'>查看10086套房源</Button>
                  <Button className='cbtn2'><Location />地图找房</Button>
                </div>
              </div>
              <div className="HomeList">
                <p className='Homescreen'>
                  {/* <span>位置</span> */}
                  <Popover
                    placement="bottom"
                    actions={positions}
                    onSelect={select}
                    reference={<span>位置</span>}
                  />
                  <Popover
                    placement="bottom"
                    actions={types}
                    onSelect={select}
                    reference={<span>户型</span>}
                  />
                  <Popover
                    placement="bottom"
                    actions={prices}
                    onSelect={select}
                    reference={<span>租金</span>}
                  />
                  <Popover
                    placement="bottom"
                    actions={more}
                    onSelect={select}
                    reference={<span>更多</span>}
                  />
                  <Popover
                    placement="bottom"
                    actions={sort}
                    onSelect={sortes}
                    reference={<span>排序</span>}
                  />
                </p>
                <div id='listAll'>
                  <List>
                    {data.filter(d => d.classfy === element.name).map((item, index) => (
                      <List.Item key={item._id}>
                        <div className='list'>
                          <img src='./aaa5.png' onClick={() => { jumpDetial(item) }}></img>
                          <p>
                            <Ellipsis style={{ fontSize: '12px' }} content={item.house_type + item.house_area + 'm²' + item.plot} ></Ellipsis>
                          </p>
                          <p>
                            <Ellipsis content={item.classfy + item.name + ' ' + item.describe}></Ellipsis>
                          </p>
                          {item.tip.slice(0, 3).map((ele, index) => (
                            <span key={index} style={{ fontSize: '12px', marginRight: '10px', background: 'skyblue' }}>{ele}</span>
                          ))} <br></br>
                          <span style={{ fontSize: '16px', color: '#f57c00' }}>{item.price}/月</span>
                        </div>
                      </List.Item>
                    ))}
                  </List>
                  <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </div>
              </div>
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>
    </div>
  )
}
